<template>
    <div>
        <van-nav-bar
                left-text="返回"
                left-arrow
                @click-left="onClickLeft">
                <span slot="title" style="color: red">
                    电影
                </span>
        </van-nav-bar>

        <div v-for="movieTheatre in movieTheatres" style="padding: 15px" @click="goCinemaDetail(movieTheatre.id)">
            <van-row gutter="20" type="flex" justify="space-between">
                <van-col>
                    <span style="font-weight: bold">{{movieTheatre.name}}({{movieTheatre.brandName}})</span>
                </van-col>
                <van-col>
                    <span style="color: red">{{movieTheatre.price}}元</span>
                </van-col>
            </van-row>
            <van-row gutter="20" type="flex" justify="space-between">
                <van-col style="width: 85%">
                    <div class="text-overflow">
                        <span style="font-size: 12px;color: gray">{{movieTheatre.address}}</span>
                    </div>
                </van-col>
            </van-row>
            <br/>
            <hr/>
        </div>
    </div>
</template>
<script>
    import cinemasAdi from "../../api/cineams";
    import {Toast} from 'vant';

    export default {
        data() {
            return {
                movieTheatres: []
            }
        },
        created() {
            this.initData()

        },
        methods: {
            goCinemaDetail(movieTheatreId) {
                this.$router.push("/cinemaDetail/"+movieTheatreId)
            },
            initData() {
                cinemasAdi.cinemas().then(response => {
                    this.movieTheatres = response.data.movieTheatre
                    console.log(this.movieTheatres);
                }).catch(error => {
                    Toast.fail(error.data.message)
                })
            },
            onClickLeft() {
                this.$router.go(-1)
            }
        },
    }
</script>

<style scoped>
    .text-overflow {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>